<template>
    <el-dialog title="添加作业" :visible.sync="createWorkVisible" style="min-width: 400px;">
        <el-form :model="createWorkForm" ref="createWorkForm" :rules="baseRules" style="text-align: left">
            <el-form-item>
                <el-upload action="" :http-request="onCreateUpload">
                    <el-button size="small" type="primary">导入作业</el-button>
                </el-upload>
            </el-form-item>
            <el-form-item label="作业类型" label-width="80px" prop="type">
                <el-radio v-model="createWorkForm.type" :label="1">个人作业</el-radio>
                <el-radio v-model="createWorkForm.type" :label="2">小组作业</el-radio>
            </el-form-item>
            <el-form-item label="作业标题" label-width="80px" prop="title">
                <el-input v-model="createWorkForm.title" autocomplete="off" maxlength="70" show-word-limit
                    placeholder="作业标题"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="createWorkForm.content" type="textarea" placeholder="请输入作业描述"></el-input>
            </el-form-item>
            <el-form-item label="活动类型标签" label-width="100px">
                <el-input v-model="createWorkForm.activity" autocomplete="off" maxlength="10" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="应用环节" label-width="100px">
                <el-select v-model="createWorkForm.process" placeholder="请选择">
                    <el-option v-for="item in process" :key="item.value" :label="item.label" :value="item.value"
                        style="display: block">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属章节" label-width="100px">
                <el-select v-model="createWorkForm.chapter" placeholder="请选择">
                    <el-option v-for="item in chapter" :key="item.value" :label="item.label" :value="item.value"
                        style="display: block">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-switch v-model="createWorkMoreVisible" active-text="是否立即发布"
                    @click="createWorkMoreVisible = !createWorkMoreVisible">
                </el-switch>
            </el-form-item>
            <el-form-item v-if="createWorkMoreVisible">
                <el-form ref="createWorkMoreForm" :model="createWorkForm" :rules="moreRules" label-width="80px">
                    <el-form-item label="发布时间" label-width="80px" prop="releaseTime" style="margin-bottom: 24px">
                        <el-date-picker type="datetime" placeholder="选择日期时间" v-model="createWorkForm.releaseTime">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item label="截止时间" label-width="80px" prop="endTime" style="margin-bottom: 24px">
                        <el-date-picker type="datetime" placeholder="选择日期时间" v-model="createWorkForm.endTime">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="总分" prop="score">
                        <el-input v-model="createWorkForm.score" autocomplete="off"
                            style="width: 220px;margin-right:20px"></el-input>
                        <el-switch v-model="TimeoutVisible" active-text="若超时，禁止提交">
                        </el-switch>
                    </el-form-item>
                </el-form>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="resetCreateWork('createWorkForm')">取 消</el-button>
            <el-button type="primary" @click="submitCreateWork('createWorkForm')">确 定
            </el-button>
        </div>
    </el-dialog>
</template>
<script>
import { getFormData } from "@/utils/getFormData.js";
import {postRequest} from "@/utils/api";

export default {
    name: "addWork",
    components: {

    },
    data() {
        return {

            createWorkVisible: false,
            createWorkMoreVisible: false,
            TimeoutVisible: false,
            createWorkForm: {
                activity: "作业",
            },
            process: [
                {
                    label: '课前',
                    value: 0
                },
                {
                    label: '课中',
                    value: 1
                },
                {
                    label: '课后',
                    value: 2
                },
                {
                    label: '期中',
                    value: 3
                },
                {
                    label: '期末',
                    value: 4
                },
            ],
            chapter: [],
            baseRules: {
                type: [
                    { required: true, message: '请选择作业类型', trigger: 'blur' },
                ],
                title: [
                    { required: true, message: '请输入作业标题', trigger: 'blur' },
                ],
            },
            moreRules: {
                releaseTime: [
                    { required: true, message: '请选择发布时间', trigger: 'blur' },
                ],
                endTime: [
                    { required: true, message: '请选择截止时间', trigger: 'blur' },
                ],
                score: [
                    { required: true, message: '请输入作业总分', trigger: 'blur' }
                ]
            },
        }
    },
    methods: {
        isAddWorkVisible() {
            this.createWorkVisible = true
        },
        // 新建时上传文件
        onCreateUpload(file) {
            this.createWorkForm.workFile = file.file;
        },
        // 确认新建作业
        submitCreateWork() {
            if (this.createWorkMoreVisible) {
                this.createWorkForm.status = 2;
                this.createWorkForm.releaseTime = this.$moment(this.createWorkForm.releaseTime).format("YYYY-MM-DD HH:mm:ss");
                this.createWorkForm.endTime = this.$moment(this.createWorkForm.endTime).format("YYYY-MM-DD HH:mm:ss");
                if (this.TimeoutVisible) {
                    this.createWorkForm.isAllowOvertimeSubmission = 2;
                } else {
                    this.createWorkForm.isAllowOvertimeSubmission = 1;
                }
            }
            else {
                this.createWorkForm.status = 1;
                this.$delete(this.createWorkForm, "releaseTime");
                this.$delete(this.createWorkForm, "endTime");
                this.createWorkForm.score = 0;
            }
            this.submitWork();
        },
        // 取消新建作业
        resetCreateWork() {
            this.$refs.createWorkForm.resetFields();
            this.createWorkVisible = false;
            this.createWorkMoreVisible = false;
        },
        // 新建作业提交
        submitWork() {
            this.createWorkForm.courseId = localStorage.getItem('courseId');//this.$store.getters.courseId;
            postRequest('/work/insert', getFormData(this.createWorkForm)).then(res => {
                if (res) {
                    this.resetCreateWork();
                    this.$emit('init');
                }
            })
        },
    },
}
</script>
<style scoped lang="less"></style>
